<template>
	<page-container>
		<a-card>
     <div class="flex justify-between">
        <div class="flex">
        </div>
        <a-form layout="inline" :model="searchData" @finish="fetch({...searchData, page: pagination.current})">
          <a-form-item>
            <a-input v-model:value="searchData.nickname" placeholder="用户昵称或者手机号">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
          </a-form-item>
        </a-form>
      </div>
     </a-card>
		<a-card class="mt-4">
      <a-table rowKey="id" :columns="columns" :data-source="items" :pagination="pagination" :loading="loading">
        <template #bodyCell="{ text, record, column }">
          <a-space v-if="column.dataIndex === 'operation'" wrap>
            <a-button class="text-xs" type="primary" size="small" v-access="['User:index']" @click="clock(record.id)">闹钟</a-button>
            <a-button class="text-xs" type="primary" size="small" v-access="['User:index']" @click="activity(record.id)">课程</a-button>
            <a-popconfirm title="确认删除？" @confirm="del(record.id)">
              <a-button class="text-xs" danger size="small">删除</a-button>
            </a-popconfirm>
          </a-space>
          <a-avatar v-else-if="column.dataIndex === 'avatar'" shape="square" :size="32" :src="text">
            <template #icon><FileImageOutlined /></template>
          </a-avatar>
          <a-switch v-else-if="column.dataIndex === 'status'" :checked="text" checked-children="正常" :checked-value="2" un-checked-children="禁用" :un-checked-value="1" @change="(e: number)=>put({id: record.id, status: e})" />
        </template>
      </a-table>
    </a-card>
		<user-edit ref="form" @change="updated" />
    <user-activity-index ref="activity" />
    <user-clock-index ref="clock" />
	</page-container>
</template>
<script lang="ts">
import {page, list} from "@/mixins"
import UserEdit from "./UserEdit.vue"
import UserActivityIndex from "./UserActivityIndex.vue";
import UserClockIndex from "./UserClockIndex.vue";

export default {
	mixins: [page, list],
	components: { UserEdit, UserActivityIndex, UserClockIndex },
	data() {
		return {
			loadPath: 'user',
			columns: [
				{
					title: '用户昵称',
					// dataIndex: 'nickname',
          customRender: ({record}) => record.nickname || '匿名用户'
				},
				{
					title: '手机号',
					dataIndex: 'mobile',
				},
				{
					title: '头像',
					dataIndex: 'avatar',
				},
				{
					title: '状态',
					dataIndex: 'status',
				},
				{
					title: '简介',
					dataIndex: 'intro',
				},
				{
					width: 220,
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			searchData: {
				nickname: ''
			}
		}
	},
	setup(){},
	mounted () {
		this.fetch({...this.searchData, page: this.pagination.current})		
	},
	methods: {
    clock(id: number){
      this.$refs.clock.searchData.user_id = id
      this.$refs.clock.open = true
    },
    activity(id: number){
      this.$refs.activity.searchData.user_id = id
      this.$refs.activity.open = true
    }
	}
}
</script>